<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title>
  </title>
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }

    p {
      display: block;
      margin: 13px 0;
    }

  </style>
  <!--[if mso]>
    <noscript>
    <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    </noscript>
    <![endif]-->
  <!--[if lte mso 11]>
    <style type="text/css">
      .mj-outlook-group-fix { width:100% !important; }
    </style>
    <![endif]-->
  <!--[if !mso]><!-->
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Lato:300,400,500,700);

  </style>
  <!--<![endif]-->
  <style type="text/css">
    @media only screen and (min-width:480px) {
      .mj-column-per-100 {
        width: 100% !important;
        max-width: 100%;
      }

      .mj-column-per-50 {
        width: 50% !important;
        max-width: 50%;
      }
    }

  </style>
  <style media="screen and (min-width:480px)">
    .moz-text-html .mj-column-per-100 {
      width: 100% !important;
      max-width: 100%;
    }

    .moz-text-html .mj-column-per-50 {
      width: 50% !important;
      max-width: 50%;
    }

  </style>
  <style type="text/css">
    @media only screen and (max-width:480px) {
      table.mj-full-width-mobile {
        width: 100% !important;
      }

      td.mj-full-width-mobile {
        width: auto !important;
      }
    }

  </style>
  <style type="text/css">
    @media screen {
      @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 400;
        src: local('Lato Regular'), local('Lato-Regular'),
          url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
      }

      @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 700;
        src: local('Lato Bold'), local('Lato-Bold'),
          url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
      }

      @font-face {
        font-family: 'Lato';
        font-style: italic;
        font-weight: 400;
        src: local('Lato Italic'), local('Lato-Italic'),
          url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
      }

      @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 900;
        src: local('Lato Black'), local('Lato-Black'),
          url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) format('woff2');
      }

      @font-face {
        font-family: 'Telefon Black';
        font-style: normal;
        font-weight: 900;
        src: url(https://assets.codepen.io/t-1/telefon-black.woff2) format('woff2');
      }
    }

    body {
      font-family: Lato, 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif;
      font-size: 18px;
      line-height: 1.5;
      color: #e3e4e8;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      max-width: 100%;
    }

    p,
    li {
      color: #e3e4e8;
      line-height: 1.5;
      font-size: 18px;
      margin: 0 0 15px 0;
    }

    li {
      margin-bottom: 10px;
    }

    blockquote {
      background: none;
      border-left: 1px solid gray;
      padding-left: 10px;
      margin: 0 0 15px 10px;
    }

    h1,
    h2,
    h3 {
      color: white;
    }

    h1 {
      font-size: 28px;
      margin: 0;
      line-height: 1.2;
    }

    h2 {
      font-size: 26px;
      margin: 0;
      line-height: 1.2;
    }

    h3 {
      font-size: 24px;
      margin: 20px 0 10px 0;
      line-height: 1.2;
    }

    .intro-description a,
    .news-content a,
    .spark-item a,
    .subscription-details a,
    .pro-content a {
      text-decoration: none;
      color: #76adff;
    }

    pre {
      white-space: pre-wrap;
      line-height: 1.8;
      font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    }

    .view-on-web-link.view-on-web-link {
      color: #74c5ff;
      text-transform: uppercase;
      display: block;
      padding: 5px 10px;
      background: #383b43;
      width: 66%;
      margin: 0 auto;
      clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
      text-decoration: none;
    }

    .dedicated-hero-area-copy {
      padding: 20px;
    }

    .dedicated-hero-area-copy h2 {
      font-family: 'Telefon Black', system-ui, Lato, sans-serif;
      text-align: center;
      margin: 0 0 20px 0;
      font-size: 32px;
      line-height: 1;
    }

    .spark-item {
      margin-bottom: 50px;
    }

    .spark-item[data-type='sponsor'] .spark-item-type {
      color: #fedd41;
    }

    .spark-item-type {
      color: #99a3bc;
      padding-bottom: 3px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 10px;
    }

    .spark-title {
      font-weight: bold;
      color: #505050;
      padding: 5px 0 5px 0;
      font-size: 20px;
    }

    .spark-desc {
      padding-top: 4px;
      color: #cccfdc;
      font-size: 16px;
      line-height: 1.5;
    }

    .spark-thumb {
      border: 0;
      display: block;
      height: auto;
      max-width: 100%;
      outline: none;
      text-decoration: none;
      margin: 0 0 10px 0;
    }

    .news-header {
      font-family: 'Telefon Black', system-ui, Lato, sans-serif;
      margin: 0 0 5px 0;
      font-size: 36px;
      text-align: left;
      color: white;
    }

    .news-bar {
      height: 5px;
      border-radius: 100px;
      background: white;
      background: linear-gradient(92.63deg,
          #769aff 8.23%,
          #ffdd40 25.83%,
          #f19994 51.91%,
          #47cf73 68.56%);
      width: 70%;
      margin: 0 0 10px 0;
    }

    .news-content img {
      display: block;
      margin: 13px 0;
    }

    .news-content hr {
      border: 0;
      border-top: 4px solid #383b43;
      margin: 33px auto;
      width: 200px;
    }

    .pro-bar {
      height: 5px;
      border-radius: 100px;
      background: #ffdb00;
      width: 70%;
      margin: 0 0 10px 0;
    }

    .pro-header {
      text-align: left;
    }

    .pro-header a {
      color: #ffdb00;
      text-decoration: none;
    }

    .footer-bar {
      height: 10px;
      background: linear-gradient(92.63deg,
          #769aff 8.23%,
          #ffdd40 25.83%,
          #f19994 51.91%,
          #47cf73 68.56%);
    }

    @media only screen and (max-width: 400px) {
      h1 {
        font-size: 22px;
      }

      p {
        font-size: 14px;
      }

      .spark-thumb {
        display: block;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

  </style>
</head>

<body style="word-spacing:normal;background-color:#1c1d22;">
<div style="color:transparent;visibility:hidden;opacity:0;font-size:0px;border:0;max-height:1px;width:1px;margin:0px;padding:0px;border-width:0px!important;display:none!important;line-height:0px!important;"><img border="0" width="1" height="1" src="http://post.spmailtechnolo.com/q/WIezBRA8KgRt-Me8w61iLg~~/AABEfgA~/RgRmMo9EPVcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~" alt=""/></div>

  <div style="background-color:#1c1d22;">
    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#434857" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="background:#434857;background-color:#434857;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#434857;background-color:#434857;width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:600px;">
                                <img height="auto" src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_1100/v1638545296/codepen-spark-header-2022_oih61t.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600" />
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
                        <div style="font-family:Lato, system-ui, sans-serif;font-size:10px;line-height:1;text-align:center;color:#e3e4e8;"><a href="http://post.spmailtechnolo.com/f/a/lJTOc44pXuUsFgbOhS9sdQ~~/AABEfgA~/RgRmMo9EP0QcaHR0cHM6Ly9jb2RlcGVuLmlvL3NwYXJrLzMzNlcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~" class="view-on-web-link">View this issue on CodePen</a></div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;padding-top:30px;padding-right:35px;padding-bottom:0;padding-left:35px;word-break:break-word;">
                        <div style="font-family:'Telefon Black', system-ui, sans-serif;font-size:13px;line-height:125%;text-align:left;color:#e7f0ff;">
                          <h1>Tetris Strategy, Data Doodles, and Retro Spacetime</h1>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:35px;padding-left:35px;word-break:break-word;">
                        <div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:white;">
                          <div class="intro-description">
                            <p>This week's CodePen community highlights include a CSS :has()-powered Tetris strategy editor from Rock Starwind, a data doodle visualizing weather data from Sophia Wood, and a trippy space-time tunnel from Tom Miller.</p>
<p>Plus, Jon Kantner builds the "only" keyboard you'll ever need to write code on a Mac, and Type Forward shows off the flexible fun of the Oddval Variable font.</p>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#333845" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="background:#333845;background-color:#333845;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#333845;background-color:#333845;width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
              <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:15px;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                <div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#e3e4e8;">
                                  <mj-raw>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/8xLRuwH6AFdAGe7VH6u1VA~~/AABEfgA~/RgRmMo9EP0QsaHR0cHM6Ly9jb2RlcGVuLmlvL2NyZWF0aXZlb2NlYW4vcGVuL29OYVdqam9XA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/NMsp19KISDi86ljlsfLk_spacetime.png" alt="Spacetime" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/8xLRuwH6AFdAGe7VH6u1VA~~/AABEfgA~/RgRmMo9EP0QsaHR0cHM6Ly9jb2RlcGVuLmlvL2NyZWF0aXZlb2NlYW4vcGVuL29OYVdqam9XA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Spacetime</a></div>
                                        <div class="spark-desc">Fall into a spacetime tunnel in this SVG animation from Tom Miller with satisfying retro style details.</div>
                                      </div>
                                    
                                      <div class="spark-item" data-type="collection">
                                        <a href="http://post.spmailtechnolo.com/f/a/cOYi-1H7Xz4r5fN7yZZYBQ~~/AABEfgA~/RgRmMo9EP0QkaHR0cHM6Ly9jb2RlcGVuLmlvL2NvbGxlY3Rpb24vbXJMTmt3VwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/X8WMOREePPBx7AwB3gG8_cpc-handmade-textures.png" alt="#CodePenChallenge: Handmade Texture" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">collection</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/cOYi-1H7Xz4r5fN7yZZYBQ~~/AABEfgA~/RgRmMo9EP0QkaHR0cHM6Ly9jb2RlcGVuLmlvL2NvbGxlY3Rpb24vbXJMTmt3VwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">#CodePenChallenge: Handmade Texture</a></div>
                                        <div class="spark-desc">We wrapped up April's "Texture" challenge with handmade inspiration. Weave your way through our collection from week four, including Pens from <a href="http://post.spmailtechnolo.com/f/a/YOWynnLQHsynr5AtoBcy5A~~/AABEfgA~/RgRmMo9EP0QmaHR0cHM6Ly9jb2RlcGVuLmlvL2pvc2V0eHUvcGVuL1J3ZVZlQlpXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Josetxu</a>, <a href="http://post.spmailtechnolo.com/f/a/n7ppXZHbSx3FTG6fYzFTVQ~~/AABEfgA~/RgRmMo9EP0QnaHR0cHM6Ly9jb2RlcGVuLmlvL2hhejN5MG5lL3Blbi9vTmFXSndWVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">haz3y0ne</a>, <a href="http://post.spmailtechnolo.com/f/a/uMo2Uyf-I6o2G_9oAuKbjw~~/AABEfgA~/RgRmMo9EP0QwaHR0cHM6Ly9jb2RlcGVuLmlvL2NocmlzdGlhbi10aG9ydmlrL3Blbi9iR21ScEtNVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">Christian Thorvik</a>, and <a href="http://post.spmailtechnolo.com/f/a/MEtpaFonX52_DjEKu5VbTQ~~/AABEfgA~/RgRmMo9EP0QlaHR0cHM6Ly9jb2RlcGVuLmlvL1JBRkEzTC9wZW4vZ09CV3JZbVcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">RAFA3L</a>.</div>
                                      </div>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/1-p7-unjGj6-93GeRJF2Hw~~/AABEfgA~/RgRmMo9EP0QnaHR0cHM6Ly9jb2RlcGVuLmlvL2F0emVkZW50L3Blbi9tZHp3V3p5VwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/gIsbRidaTLqtAciq4ajj_shader-gallery.png" alt="Shader Gallery" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/1-p7-unjGj6-93GeRJF2Hw~~/AABEfgA~/RgRmMo9EP0QnaHR0cHM6Ly9jb2RlcGVuLmlvL2F0emVkZW50L3Blbi9tZHp3V3p5VwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">Shader Gallery</a></div>
                                        <div class="spark-desc">Take a tour of selected shader works by Matthias Hurrle in this roundup of highlights. Smash that follow button while you're at it, you'll be glad you did!</div>
                                      </div>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/qFE0rkFn7KFdzfmByUfaJA~~/AABEfgA~/RgRmMo9EP0QvaHR0cHM6Ly9jb2RlcGVuLmlvL0NoaGF2aUtoYW5kZWx3YWwvcGVuL29OYUxCT1lXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/5lBlF7c3Re6UoLCMqddf_star-struck.png" alt="Star Struck" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/qFE0rkFn7KFdzfmByUfaJA~~/AABEfgA~/RgRmMo9EP0QvaHR0cHM6Ly9jb2RlcGVuLmlvL0NoaGF2aUtoYW5kZWx3YWwvcGVuL29OYUxCT1lXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Star Struck</a></div>
                                        <div class="spark-desc">Chhavi Khandelwal paints a scene of wonder under the stars in this beautifully detailed pure CSS illustration.</div>
                                      </div>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/hMZf3tl4CmJ_TyeS3jnRcg~~/AABEfgA~/RgRmMo9EP0QqaHR0cHM6Ly9jb2RlcGVuLmlvL2NocmlzZ2Fubm9uL3Blbi9Kam1KR0xlVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/E3vgLTLQTWVznnLI91uP_ai-inside.png" alt="AI Inside" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/hMZf3tl4CmJ_TyeS3jnRcg~~/AABEfgA~/RgRmMo9EP0QqaHR0cHM6Ly9jb2RlcGVuLmlvL2NocmlzZ2Fubm9uL3Blbi9Kam1KR0xlVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">AI Inside</a></div>
                                        <div class="spark-desc">Rainbow rings encircle a shadowy computer chip in this SVG loader animation from Chris Gannon that strikes an inspired balance between the inviting and the mysterious.</div>
                                      </div>
                                    
                                  </mj-raw>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
              <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:15px 20px 0 5px;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                <div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#e3e4e8;">
                                  <mj-raw>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/hGGY4ucT1SUygkOvgZowSQ~~/AABEfgA~/RgRmMo9EP0QqaHR0cHM6Ly9jb2RlcGVuLmlvL2NlcmFtaWNTb2RhL3Blbi9XTmFvcFF6VwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/QaGruJySRuGsoqIVmS2b_svg-moving-holes.png" alt="SVG moving holes animation" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/hGGY4ucT1SUygkOvgZowSQ~~/AABEfgA~/RgRmMo9EP0QqaHR0cHM6Ly9jb2RlcGVuLmlvL2NlcmFtaWNTb2RhL3Blbi9XTmFvcFF6VwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">SVG moving holes animation</a></div>
                                        <div class="spark-desc">Expanding and contracting rectangles continuously circulate in a pleasing pattern in this "SVG / SMIL fake 3D" animation from CeramicSoda.</div>
                                      </div>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/ix3wS_qNXvKsdopfZCIdTg~~/AABEfgA~/RgRmMo9EP0QraHR0cHM6Ly9jb2RlcGVuLmlvL2ZyYWN0YWxraXR0eS9wZW4vWXpKVlpYTVcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/NujSzu1MQaWjuLCMNQJU_data-doodle-temperature.png" alt="data doodle - Salem OR temperature data" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/ix3wS_qNXvKsdopfZCIdTg~~/AABEfgA~/RgRmMo9EP0QraHR0cHM6Ly9jb2RlcGVuLmlvL2ZyYWN0YWxraXR0eS9wZW4vWXpKVlpYTVcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">data doodle - Salem OR temperature data</a></div>
                                        <div class="spark-desc">Sophia Wood uses p5.js to visualize National Weather Service data on average temperatures in Salem, Oregon in three unique styles. Click the canvas to see a different visualization.</div>
                                      </div>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/5_XxjgtKCgm2QA3vIxL9mQ~~/AABEfgA~/RgRmMo9EP0QraHR0cHM6Ly9jb2RlcGVuLmlvL1JvY2tTdGFyd2luZC9wZW4vWXpPTU96YVcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/D2uMQxPsRqWqEtmkopDq_tetris-editor.png" alt="CSS Tetris Strategy Editor" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/5_XxjgtKCgm2QA3vIxL9mQ~~/AABEfgA~/RgRmMo9EP0QraHR0cHM6Ly9jb2RlcGVuLmlvL1JvY2tTdGFyd2luZC9wZW4vWXpPTU96YVcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">CSS Tetris Strategy Editor</a></div>
                                        <div class="spark-desc">Rock Starwind builds a tool for the serious Tetris player to "aid you in devising new strategic setups during your sessions and coming up with ways to get out of tough situations". Pop open the Pen details for an in-depth look at how it works and how it was made.</div>
                                      </div>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/anN5K3DUGENaSK8cnTckiw~~/AABEfgA~/RgRmMo9EP0QnaHR0cHM6Ly9jb2RlcGVuLmlvL2prYW50bmVyL3Blbi9aRXFLZ1dKVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/R2lFLSw8RXGeonEYKsGh_copypaste-apple-keyboard.png" alt="Copypaste Apple Keyboard" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/anN5K3DUGENaSK8cnTckiw~~/AABEfgA~/RgRmMo9EP0QnaHR0cHM6Ly9jb2RlcGVuLmlvL2prYW50bmVyL3Blbi9aRXFLZ1dKVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">Copypaste Apple Keyboard</a></div>
                                        <div class="spark-desc">Jon Kantner shares a funny concept for "the only Apple keyboard you’ll ever need as a developer!" in this super-realistic CSS illustration complete with JS-powered with clickable keys.</div>
                                      </div>
                                    
                                      <div class="spark-item" data-type="pen">
                                        <a href="http://post.spmailtechnolo.com/f/a/TEGBxqAeVMw2-5-ztTsuUw~~/AABEfgA~/RgRmMo9EP0QqaHR0cHM6Ly9jb2RlcGVuLmlvL3R5cGVmb3J3YXJkL3Blbi9hYlJwb3hWVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">
                                          <img class="spark-thumb" src="https://production-codepen-email-assets.s3-us-west-2.amazonaws.com/production/3NSpxLxhSi6SjsGftDug_is-it-not.png" alt="Is it not?" height="" width="260" />
                                        </a>
                                        <div class="spark-item-type">pen</div>
                                        <div class="spark-title"><a href="http://post.spmailtechnolo.com/f/a/TEGBxqAeVMw2-5-ztTsuUw~~/AABEfgA~/RgRmMo9EP0QqaHR0cHM6Ly9jb2RlcGVuLmlvL3R5cGVmb3J3YXJkL3Blbi9hYlJwb3hWVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">Is it not?</a></div>
                                        <div class="spark-desc">Type Forward demonstrates the flexible fun of the Oddval Variable font in this type specimen that cycles through the variable weights in an animated wave.</div>
                                      </div>
                                    
                                  </mj-raw>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#131417" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="background:#131417;background-color:#131417;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#131417;background-color:#131417;width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:20px 0;padding-top:15px;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:15px;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                <div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#e3e4e8;">
                                  <mj-raw>
                                    <h2 class="news-header" style="margin: 0 0 5px 0;">
                                      <img src="https://assets.codepen.io/t-1/chriscorner.png" style="width: 65px;" /> Chris’ Corner
                                    </h2>
                                    <p style="color: #9dabc9; margin: 0 0 15px 0;font-size: 16px;">A collection of web design and development news and thoughts from CodePen's own Chris Coyier.</p>
                                    <div class="news-bar"></div>
                                  </mj-raw>
                                  <mj-raw>
                                    <div class="news-content">
                                      <p>If you’re a super normal person like me, you’ve gone to war with typographic widows and orphans many times over your years as a developer, trying to ensure they don’t happen and ruin anyone’s day. You know what I mean, a headline with one silly little word that has wrapped down onto its own line. If only you could add a couple of soft returns in there to prevent it. You can, of course, but you know better. A soft return might fix a problem at one particular container width, that break causes an even more awkward problem at another container width.</p>
<p>One technique that is sometimes employed is to insert an <code>&amp;nbsp;</code> (non-breaking space) between the last two words (maybe even three?) of a headline (or paragraphs, if you’re nasty).</p>
<blockquote><p>
This little piggy went to&amp;nbsp;market
</p></blockquote>
<p>None of us can be troubled to hand-code that if we’re in charge of the HTML of headlines regularly. I wrote my own PHP to split headlines by word and manually insert the non-breaking space on CSS-Tricks a decade or more ago. It can be done in client-side JavaScript too, naturally, but nobody wants to see that reflow.</p>
<p>Finally, along comes the web platform with something that looks like a solution:</p>
<pre><code>
h1, h2, h3 {
  text-wrap: balance;
}
</code></pre>
<p>Tyler Sticka <a href="http://post.spmailtechnolo.com/f/a/Wf0CVpaQM731XVWzurBmRQ~~/AABEfgA~/RgRmMo9EP0RLaHR0cHM6Ly9jbG91ZGZvdXIuY29tL3RoaW5rcy9yZXNwb25zaXZlLWhlYWRsaW5lcy1hcmUtYWJvdXQtdG8tZ2V0LWF3ZXNvbWUvVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">has an article about this new CSS</a> and offers this clear comparison:</p>
<figure>
<img src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_848,h_424,dpr_2/f_auto,q_auto/v1682624826/headline-r1-orphan-1024x512-1.png?_i=AA" alt="A text sample that reads 'Headlines should be unique like you'. The word 'you' has been pushed to the line below, making it an 'orphan'. " width="550"/>
<figcaption>uh oh — at this width, we get an orphan</figcaption>
</figure>
<figure>
<img src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_848,h_424,dpr_2/f_auto,q_auto/v1682624844/headline-r1-balance-1024x512-1.png?_i=AA" alt="A text sample that reads 'Headlines should be unique like you. The words 'Headlines should' are on the top line, and 'be unique like you' is on the second line. " width="550"/>
<figcaption>yay — no more orphan (or widow or whatever, my brain cannot learn which is which) with <code>text-wrap: balance</code></figcaption>
</figure>
<p>That “balanced” headline. Nice, generally a much more pleasing result for multi-line headlines.</p>
<p>But notably, what is happening here isn’t explicitly orphan-fighting. <a href="http://post.spmailtechnolo.com/f/a/oCYGgnEeP8Vfd1NncgcpUA~~/AABEfgA~/RgRmMo9EP0QeaHR0cHM6Ly9jbGFnbnV0LmNvbS9ibG9nLzI0MjQvVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">Richard Rutter makes this clear in an article</a> of his own:</p>
<blockquote><p>What this <strong>is not</strong> is control over widows and orphans. My previous examples show how the text balancing algorithm in Chrome Canary does indeed prevent a widow (the single word dropped down), and that’s a highly likely outcome. But you have to remember that the balancing job shortens the lines, so this isn’t an approach you would take to prevent widows at the end of paragraphs. In fact Canary limits balancing to 4 lines.</p></blockquote>
<p>So it <em>works</em> for avoiding orphans/widows, but almost as a side effect of the balancing. In a follow-up article, Richard shines a light on what could be a future answer:</p>
<blockquote><p>Bit by bit, the CSSWG seems to have been converging on a potential solution. In the current draft of the CSS Text Module Level 4, there is mention of <a href="http://post.spmailtechnolo.com/f/a/pv8jxiz3pQrDNbpeg_B_gA~~/AABEfgA~/RgRmMo9EP0Q1aHR0cHM6Ly9kcmFmdHMuY3Nzd2cub3JnL2Nzcy10ZXh0LTQvI2xhc3QtbGluZS1saW1pdHNXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Last Line Minimum Length</a>. …</p>
	<p><a href="http://post.spmailtechnolo.com/f/a/QkHhnlndjtekOINDxWbLqg~~/AABEfgA~/RgRmMo9EP0QbaHR0cHM6Ly9naXRodWIuY29tL0FtZWxpYUJSVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">Amelia Bellamy-Royds</a> took the Last Line Minimum Length idea and <a href="http://post.spmailtechnolo.com/f/a/5VNaYxulwO6_SQyQ8hlbEA~~/AABEfgA~/RgRmMo9EP0RGaHR0cHM6Ly9naXRodWIuY29tL3czYy9jc3N3Zy1kcmFmdHMvaXNzdWVzLzM0NzMjaXNzdWVjb21tZW50LTU2MDEzNjE3N1cDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">proposed a solution</a> with a new `min-last-line` property. Her proposed property would specify a minimum length for the final line, and a minimum length for the penultimate line once you’d dropped a word or more down to address the short final line.</p></blockquote>
<p>Ship it. Especially if it works on paragraphs in multi-col.</p>
<hr />
<p>✨ <strong>Outstanding blog post alert!</strong> ✨</p>
<p><a href="http://post.spmailtechnolo.com/f/a/04iE4HD-LiDQvJsl3k5bXw~~/AABEfgA~/RgRmMo9EP0QwaHR0cHM6Ly9raXp1LmRldi9hbmNob3ItcG9zaXRpb25pbmctZXhwZXJpbWVudHMvVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">Future CSS: Anchor Positioning</a> by Roman Komarov.</p>
<p>We only have the most rudimentary way to “connecting” the position of two elements in CSS today. Take an element that has non-static positioning, and you can absolutely position an element within that context. That’s about it. Kinda sad when you think about it — especially as it comes up relatively often. Mostly in the context of tooltips and context menus, where you want an element (of arbitrary DOM position) to be positioned right next to the element that needs the tooltip or context menu.</p>
<p>This positioning challenge is usually done with JavaScript (<em>the cow paths have been laid</em>), by way of <code>getBoundingClientRect</code> and doing various geometric math to make sure the element doesn’t wank off the edge of the browser or in any way become “data loss” as we like to say in CSS. More challenging that it seems. Letting CSS do it seems awfully nice.</p>
<p>CSS tends not to focus solutions on one exact need though, preferring instead to solve the problem conceptually with primitives that might solve lots of use cases. This is where Roman gets clever with things and makes examples like this connecting elements with pointing arrows (involving SVG):</p>
<image src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_600,h_357,dpr_2/f_auto,q_auto/v1682959243/ezgif-3-52c5cbdd18.gif?_i=AA" alt="An animation of an arrow pointing between two dots. " width="550"/>
<p>But also some cool demos with a slightly more practical twist, like moving highlight menus:</p>
<img src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_600,h_69,dpr_2/f_auto,q_auto/v1682959264/ezgif-3-9efc9a8323.gif?_i=AA" alt="Animation of a hover state on menu items. " width="550"/>
<p>Jhey Tompkins’ article on this, <a href="http://post.spmailtechnolo.com/f/a/bB8uZUaCpxiZRcHwo-FosQ~~/AABEfgA~/RgRmMo9EP0RcaHR0cHM6Ly9kZXZlbG9wZXIuY2hyb21lLmNvbS9ibG9nL3RldGhlci1lbGVtZW50cy10by1lYWNoLW90aGVyLXdpdGgtY3NzLWFuY2hvci1wb3NpdGlvbmluZy9XA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Tether elements to each other with CSS anchor positioning</a>, covers things from first principles and is probably a better reference for the syntax. But Jhey being Jhey, there are some weird and clever demos as well, like this emoji finger form:</p>
<img src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_600,h_337,dpr_2/f_auto,q_auto/v1682959335/ezgif-3-9f0d94f4b3.gif?_i=AA" alt="A concept for a website signup form with an emoji finger pointing at each form field in order. " width="550"/>
<p><a href="http://post.spmailtechnolo.com/f/a/1O43vKK0kLGtb0oUDf2XCA~~/AABEfgA~/RgRmMo9EP0QqaHR0cHM6Ly9jb2RlcGVuLmlvL3dlYi1kb3QtZGV2L3Blbi9xQk1hT2VMVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">It’s a Pen</a>, naturally.</p>
<p>There is a <code>&lt;meter&gt;</code> element in HTML, and <a href="http://post.spmailtechnolo.com/f/a/aEv0VSG_SsdSKPFwrx3Pyg~~/AABEfgA~/RgRmMo9EP0QuaHR0cHM6Ly93d3cuaHRtaGVsbC5kZXYvYWR2ZW50Y2FsZW5kYXIvMjAyMi81L1cDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">Dana Byerly</a> does a great job of showcasing it. It’s a natural fit for stuff like “You’ve uploaded 47 of your maximum 100 files” in a visually more understandable way. There is some accessibilty stuff to get right though, including using “fallback text” (the text within the element) which is used by some screen readers and will certainly be useful context. Free basic styling is nice:</p>
<img src="https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_514,h_432,dpr_2/f_auto,q_auto/v1682959924/meter-contrast.png?_i=AA" alt="A demonstration of the default styles for the meter element in different browsers. " width="550"/>
<p><a href="http://post.spmailtechnolo.com/f/a/UfX8NPp_b8VuLEiX587gAA~~/AABEfgA~/RgRmMo9EP0QsaHR0cHM6Ly9jb2RlcGVuLmlvL3N1cGVydGVycmlmaWMvcGVuL0tLUkp3cVdXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Live tests as a Pen</a>, naturally.</p>
<hr />
<p>I like the term “<a href="http://post.spmailtechnolo.com/f/a/-4knenUboRHIJ94PUoJznQ~~/AABEfgA~/RgRmMo9EP0RQaHR0cHM6Ly9ibGFrZXdhdHNvbi5jb20vam91cm5hbC9zdXJ2ZXlpbmctdGhlLWxhbmRzY2FwZS1vZi1jc3MtbWljcm8tZnJhbWV3b3Jrcy9XA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">CSS micro-framework</a>” as coined here by Blake Watson.</p>
<blockquote><p>
	<ul>
		<li>May include classes for building grids, components, etc. Typically limited, though, because of the next rule.</li>
       <li>Under 10kb minified and gzipped. I feel like you can’t claim “micro” or “lightweight” beyond 10kb.</li>
		<li>JavaScript is optional and is not supplied by the framework.</li>
	</ul>
	</p>
	</blockquote>
<p>Examples:</p>
<ul>
<li><a href="http://post.spmailtechnolo.com/f/a/_phEsymgh0OKQHNmq0RygQ~~/AABEfgA~/RgRmMo9EP0QUaHR0cHM6Ly9waWNvY3NzLmNvbS9XA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Pico</a></li>
<li><a href="http://post.spmailtechnolo.com/f/a/ncLoopDpVCrkDst6nh2fEA~~/AABEfgA~/RgRmMo9EP0QlaHR0cHM6Ly9waWN0dXJlcGFuMi5naXRodWIuaW8vc3BlY3RyZVcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">Spectre</a></li>
<li><a href="http://post.spmailtechnolo.com/f/a/Ip9mJT0xOSyoAXXQWsHAKg~~/AABEfgA~/RgRmMo9EP0QUaHR0cHM6Ly9taWxsaWdyYW0uaW9XA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Milligram</a></li>
<li><a href="http://post.spmailtechnolo.com/f/a/VeAZ8HkVHvEUahh3hJTfQA~~/AABEfgA~/RgRmMo9EP0QXaHR0cDovL2dldHNrZWxldG9uLmNvbS9XA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">Skeleton</a></li>
<li><a href="http://post.spmailtechnolo.com/f/a/Z-NmkYLpps8FcX5UlENeHw~~/AABEfgA~/RgRmMo9EP0QVaHR0cHM6Ly9waWNuaWNzcy5jb20vVwNzcGNCCmQ-VApQZP5vR7VSETE2NzcyMTQwMjFAcXEuY29tWAQAAAAA">Picnic</a></li>
<li><a href="http://post.spmailtechnolo.com/f/a/HF3blHVEWtL1w3ZzShTh9w~~/AABEfgA~/RgRmMo9EP0QTaHR0cHM6Ly9wdXJlY3NzLmlvL1cDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">Pure</a></li>
</ul>
<p>They aren’t just a reset and they aren’t… Bootstrap. They aren’t necessarily “classless” either, which is a whole other category of framework that only styles things based on HTML selectors.</p>
<p>And then, another possible ending:</p>
<blockquote><p>As we go deeper down the path of minimal CSS starters we end up at the logical conclusion—you might not need a framework at all.</p></blockquote>
                                      
                                    </div>
                                  </mj-raw>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#333845" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="background:#333845;background-color:#333845;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#333845;background-color:#333845;width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:15px;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                <div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#e3e4e8;">
                                  <mj-raw>
                                    <h2 class="pro-header">
                                      <a href="http://post.spmailtechnolo.com/f/a/RJWZd4GqPB0vSD5xFoi1vA~~/AABEfgA~/RgRmMo9EP0QXaHR0cHM6Ly9jb2RlcGVuLmlvL3Byby9XA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~"> CodePen PRO </a>
                                    </h2>
                                    <div class="pro-bar"></div>
                                    <div class="pro-content">
                                      <p>Need to make a Pen, Project, or Collection private? That’s just a toggle away with <a href="http://post.spmailtechnolo.com/f/a/MXXcvY0IV4Eex1TC4DlBkQ~~/AABEfgA~/RgRmMo9EP0QjaHR0cHM6Ly9jb2RlcGVuLmlvL2ZlYXR1cmVzL3ByaXZhY3lXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">CodePen PRO</a>. Prefer everything you make is <a href="http://post.spmailtechnolo.com/f/a/WhVo1H9jUuz5EHstsbcKag~~/AABEfgA~/RgRmMo9EP0RlaHR0cHM6Ly9ibG9nLmNvZGVwZW4uaW8vZG9jdW1lbnRhdGlvbi9wcml2YXRlLWl0ZW1zLyNob3ctZG8taS1lbmFibGUtdGhlLXByaXZhdGUtYnktZGVmYXVsdC1zZXR0aW5nLTVXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">private by default</a>? No problem. And if you are the type that makes private things and then makes them public when they are ready, you’re in luck, that first private-to-public switch is when we send the Pen to the feeds.</p>
                                    </div>
                                  </mj-raw>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="vertical-align:top;padding:25px;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                <div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1;text-align:left;color:#eeeeee;">
                                  <p class="subscription-details"> You can adjust your <a href="http://post.spmailtechnolo.com/f/a/hlQswEvFpk4M6cRIETEu4w~~/AABEfgA~/RgRmMo9EP0QpaHR0cHM6Ly9jb2RlcGVuLmlvL3NldHRpbmdzL25vdGlmaWNhdGlvbnNXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~"> email preferences </a> any time, or <a href="http://post.spmailtechnolo.com/f/a/lhEUl_abKrVIH1vODC-WoQ~~/AABEfgA~/RgRmMo9EP0S5aHR0cHM6Ly9jb2RlcGVuLmlvL3NldHRpbmdzL25vdGlmaWNhdGlvbnMvb3B0b3V0P191bj0ydHpGQTE3RTlZaTBVWmNiRENIVXFleFpYaENFRDY4MUV4OFdnMTdoSXJrUVUlMkZ2M3RvdGYlMkZUMUVBWmNyYmNWJTJGckNlQ1lkOWpjVmclMkJkMEpRMnpRUkF3SW9NWm1ZbDhlNVRXNXN2QTE3N1p0RjZzNTByMmVpJTJGMGslM0RXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~"> instantly opt out </a> of emails of this kind. Need help with anything? Hit up <a href="http://post.spmailtechnolo.com/f/a/xIfbYlD8CuFq28ISRCO6yw~~/AABEfgA~/RgRmMo9EP0QaaHR0cHM6Ly9jb2RlcGVuLmlvL3N1cHBvcnRXA3NwY0IKZD5UClBk_m9HtVIRMTY3NzIxNDAyMUBxcS5jb21YBAAAAAA~">support</a>. </p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td><![endif]-->
              <div class="footer-bar"></div>
              <!--[if mso | IE]></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><![endif]-->
  </div>

<img border="0" width="1" height="1" alt="" src="http://post.spmailtechnolo.com/q/CLX8qarrtl7plmTLfekEog~~/AABEfgA~/RgRmMo9EPlcDc3BjQgpkPlQKUGT-b0e1UhExNjc3MjE0MDIxQHFxLmNvbVgEAAAAAA~~">
</body>

</html>

